<template>
  <div class="videoPlayer">
    <video :src="videoSrc" ref="video" width="100px" height="60px" />
    <div class="play" @click="showPopup">
      <van-icon size="24" color="#ffffff" name="video" />
    </div>
    <van-popup v-model="show">
      <video :src="videoSrc" autoplay="auto" controls="controls"></video>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'sVideo',
  data() {
    return {
      show: false
    }
  },
  props: {
    videoSrc: '',
    // isPlay: false
  },
  methods: {
    // handleVideo(e) {
    //   const video = this.$refs.video
    //   if (video.paused) {
    //     this.isPlay = true
    //     video.play()
    //   } else {
    //     video.pause()
    //     this.isPlay = false
    //   }
    // },
    showPopup() {
      this.show = true
    },
    // end() {
    //   this.isPlay = false
    // }
  }
}
</script>

<style lang="less" scoped>
.videoPlayer {
  border-radius: @border-radius-md;
  overflow: hidden;
  position: relative;
  width: 100px;
  height: 60px;
  background: @gray-2;
  .play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
